<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>简化表白墙</title>
	</head>
	
	
	<body>
		
		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			
			h3{
				padding: 20px;
			}
			
			.container{
				width: 100%;
				height: 260px;
				text-align: center;
				
				
			}
			
			p{
				font-size: 10px;
				color: #999;
			}
			
			.row{
				width: 400px;
				height: 30px;
				/* 水平居中 row的长对上一个div水平居中*/
				margin: 0 auto;

				
				display: flex;
				/* row内的元素水平居中和垂直居中 */
				justify-content: center;
				align-items: center;
			}
			
			.row span{
				width: 60px;
				text-align: left;
			}
			
			.row input{
				width: 200px;
				/* 缩进 */
				text-indent: 0.3em;
				/* 去掉输入框的轮廓线 */
				outline: none;
			}
			
			.row #btn{
				width: 200px;
				padding: 5px;
				background-color: bisque;
				/* 去掉边框 */
				border: none;
				/* 圆角矩形 */
				border-radius: 10px;
			}
			
			.row #btn:active{
				background-color: rgb(14, 84, 163);
			}

		</style>
		<div class="container">
			<h3>花猫对猫哥说</h3>
			<p>输入后点击提交 会将信息显示在表格</p>
			<div class="row">
				<span>谁:</span>
				<input type="text">
			</div>
			<div class="row">
				<span>对谁:</span>
				<input type="text">
			</div>
			<div class="row">
				<span>说:</span>
				<input type="text">
			</div>
			<div class="row">
				<button id="btn">提交</button>
			</div>
		</div>
		
		<script>
			//当用户点击btn 就会获取input中的内容 从而把内容构造成一个div 插入到末尾
			let btn=document.querySelector('#btn');
			btn.onclick=function(){
				let input=document.querySelectorAll('input');
				let from=input[0].value;
				let to=input[1].value;
				let content=input[2].value;
				if(from=='' || to=='' || content==''){
					//用户没写完
					return;
				}
				
				//生成一个新的div 内容就是input里的内容 把这个div加到页面中
				let newdiv=document.createElement('div');
				newdiv.innerHTML=from+'对'+to+'说'+content;
				newdiv.style.color='red';
				let container=document.querySelector('.container');
				container.appendChild(newdiv);
				
				
				
				// 清空输入框内容
				for(let i=0;i<input.length;i++){
					input[i].value='';
				}
				
			} 
			
			
			
		</script>
		
		
		
		
		
		
	</body>
</html>
